<template>
	<div>
		<el-divider>
			<i class="el-icon-folder-opened"></i>
		</el-divider>

		<div class="data">
			<el-collapse v-model="activeNames">
				<el-collapse-item name="1">
					<template slot="title">
						<span class="title">目录 File directory</span>
					</template>
					<el-table :data="paths" border class="table" @row-click="rowClick" :show-header="false"
						empty-text="暂无目录">
						<el-table-column prop="data.label" label="名称">
						</el-table-column>
					</el-table>
				</el-collapse-item>
			</el-collapse>

			<el-collapse v-model="activeNames">
				<el-collapse-item name="2">
					<template slot="title">
						<span class="title">接口 API interface</span>
					</template>
					<el-table :data="apis" border class="table" @row-click="rowClick" :show-header="false"
						empty-text="暂无接口">
						<el-table-column label="名称" width="150" prop="data.label"></el-table-column>
						<el-table-column label="简介">
							<template slot-scope="scope">
								<span style="font-weight: 800;font-size: 12px;">{{describe(scope.row.data.id)}}</span>
							</template>
						</el-table-column>
					</el-table>
				</el-collapse-item>
			</el-collapse>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'pathMoudle',
		props: {
			power: {
				type: Boolean
			},
			Nav: {
				type: Object
			}
		},
		model: ['Nav'],
		data() {
			return {
				paths: [],
				apis: [],
				activeNames: ['1', '2']
			}
		},
		methods: {
			update() {
				// 更新数据
				this.paths = []
				this.apis = []
				for (let item of this.Nav.Node.childNodes) {
					if (item.data.type === 'path') {
						this.paths.push(item)
					} else if (item.data.type === 'file') {
						this.apis.push(item)
					}
				}
			},
			rowClick(row) {
				// 点击跳转
				this.Nav.Node = row
			},
			describe(id){
				let explain = this.Nav.source.source[id][0].info.explain
				return explain
			}
		},
		created() {
			this.update()
			console.log(this.apis,this.Nav)
		}
	}
</script>

<style scoped>
	.table {
		min-width: 500px;
	}

	.title {
		font-size: 18px;
		font-weight: 800;
		font-family: "宋体";
	}

	.data {
		border: 1px solid #cbcbcb;
		padding: 20px;
		transition: all .3s;
	}

	.data:hover {
		box-shadow: 2px 2px 4px #d0d0d0;
		transition: all .3s;
	}
</style>
